<template>
	<view class="bg">
		<view class="top">
			<view class="top-img">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="0.1" d="M0,0L34.3,26.7C68.6,53,137,107,206,112C274.3,117,343,75,411,85.3C480,96,549,160,617,154.7C685.7,149,754,75,823,42.7C891.4,11,960,21,1029,69.3C1097.1,117,1166,203,1234,197.3C1302.9,192,1371,96,1406,48L1440,0L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path></svg>
			</view>
			<view class="top-img">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="0.1" d="M0,224L20,234.7C40,245,80,267,120,250.7C160,235,200,181,240,170.7C280,160,320,192,360,202.7C400,213,440,203,480,181.3C520,160,560,128,600,96C640,64,680,32,720,32C760,32,800,64,840,69.3C880,75,920,53,960,58.7C1000,64,1040,96,1080,138.7C1120,181,1160,235,1200,256C1240,277,1280,267,1320,250.7C1360,235,1400,213,1420,202.7L1440,192L1440,320L1420,320C1400,320,1360,320,1320,320C1280,320,1240,320,1200,320C1160,320,1120,320,1080,320C1040,320,1000,320,960,320C920,320,880,320,840,320C800,320,760,320,720,320C680,320,640,320,600,320C560,320,520,320,480,320C440,320,400,320,360,320C320,320,280,320,240,320C200,320,160,320,120,320C80,320,40,320,20,320L0,320Z"></path></svg>
			</view>
			<view class="top-img">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="0.1" d="M0,192L20,170.7C40,149,80,107,120,106.7C160,107,200,149,240,160C280,171,320,149,360,133.3C400,117,440,107,480,112C520,117,560,139,600,138.7C640,139,680,117,720,133.3C760,149,800,203,840,208C880,213,920,171,960,160C1000,149,1040,171,1080,176C1120,181,1160,171,1200,154.7C1240,139,1280,117,1320,122.7C1360,128,1400,160,1420,176L1440,192L1440,320L1420,320C1400,320,1360,320,1320,320C1280,320,1240,320,1200,320C1160,320,1120,320,1080,320C1040,320,1000,320,960,320C920,320,880,320,840,320C800,320,760,320,720,320C680,320,640,320,600,320C560,320,520,320,480,320C440,320,400,320,360,320C320,320,280,320,240,320C200,320,160,320,120,320C80,320,40,320,20,320L0,320Z"></path></svg>
			</view>
			<view class="top-ava">
				<image src="../../../static/avater.png" style="height: 100%;width: 15vh;border-radius: 50%;" v-if="!userInfo.headerUrl"/>
				<image :src="userInfo.headerUrl" style="height: 100%;width: 15vh;border-radius: 50%;" v-if="userInfo.headerUrl"/>
			</view>
		</view>
		<view class="mid">
			<view class="mid-label">
				<view class="mid-label-icon"><i class="iconfont" style="color: #a1c4fd;margin-right: 5px;font-size: 13px;line-height: 20px; ">&#xe658;</i><span>新手机号</span></view>
				<view class="mid-label-split"></view>
				<input class="uni-input mid-input" type="number" placeholder="请输入新手机号"  v-model="phone" @input="getInputPhone" maxlength="11"/>
			</view>
			<view class="mid-label">
				<view class="mid-label-icon"><i class="iconfont" style="color: #a1c4fd;margin-right: 5px;font-size: 16px;line-height: 20px; ">&#xe639;</i><span>密码</span></view>
				<view class="mid-label-split"></view>
				<input class="uni-input mid-input" type="text" placeholder="请输入密码" :password='flag' v-model="password" @input="getInputPwd" maxlength="16"/>
				<view class="mid-label-icon-eye" v-show="!flag" @click="flag = !flag"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(1)">&#xe6db;</i></view>
				<view class="mid-label-icon-eye" v-show="flag" @click="flag = !flag"><i class="iconfont" style="font-size: 18px;color: #999;" @click="changePwdType(1)">&#xe6cf;</i></view>
			</view>
			<view class="mid-label">
				<view class="mid-label-icon"><i class="iconfont" style="color: #a1c4fd;margin-right: 5px;font-size: 14px;line-height: 20px; ">&#xe63a;</i><span>手机验证码</span></view>
				<view class="mid-label-split"></view>
				<input class="uni-input mid-input" type="number" placeholder="请输入验证码" v-model="code_msg" @input="getInputCodeMsg" maxlength="6"/>
				<view class="mid-label-btn" @click="getMsgCode" v-if="!disabled">获取验证码</view>
				<view class="mid-label-btn-disabled"v-if="disabled">{{ss}}秒后重新发送</view>
			</view>
			<view class="mid-label">
				<view class="mid-label-icon"><i class="iconfont" style="color: #a1c4fd;margin-right: 5px;font-size: 14px;line-height: 20px; ">&#xe6df;</i><span>图片验证码</span></view>
				<view class="mid-label-split"></view>
				<input class="uni-input mid-input" type="text" placeholder="请输入验证码" v-model="code_img" @input="getInputCodeImg" maxlength="4" />
				<view class="mid-label-img"><image :src="url" @click="getCode" mode="widthFix"></image></view>
			</view>
			<view class="mid-btn" @click="onSubmit">提交</view>
		</view>
		
	</view>
</template>

<script>
	import { decryptDes } from '@/utils/utils';
	export default {
		data() {
			return {
				userInfo: {},
				url: '',
				phone: '',
				code_msg: '',
				code_img: '',
				password: '',
				encryptedString: '',//获取的图片验证码 
				uid_msg: '',//获取的短信验证码
				disabled: false,
				ss: 60,
				flag: true,
				timeout: '',
			}
		},
		onLoad(option){
			this.initData();
		},
		onShow() {
			this.getCode();
		},
		methods: {
			initData(){
				this.$req.userData('/customer/getCustomerInfo').then(v => {
					this.userInfo = v.data
				})
			},
			getCode(){
				this.$req.sendCheck('/code/send/pictureCode/uid').then(v=>{
					if (v._result) {
						this.encryptedString = v.data;
						this.url = '/api/oceanside-send-and-check/code/send/pictureCode/' + this.encryptedString
				    }
				})
			},
			//获取短信验证码
			async getMsgCode(){
				if(!this.phone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!reg_phone.test(this.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				//获取加密串
				let pk = await this.$req.sendCheck('/msg/pageKey.dnl', {
					messageFlag: 'XIAOXIANG'
				})
				let messageKey = decryptDes(pk.data, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l'])
				
				this.disabled = true;
				this.ss = 60;
				this.timeout = setInterval(v => {
					this.ss--;
					if (this.ss == 0) {
						this.disabled = false;
						window.clearInterval(this.timeout)
					}
				}, 1000)
				
				let backmsg = await this.$req.sendCheck('/msg/send/identifyCode', {
					uid: messageKey,
					phone: this.phone,
					messageFlag: 'XIAOXIANG',
					remark:"注册获取验证码"
				})
				this.uid_msg = backmsg.data
			},
			getInputPhone(e){
				this.phone = e.detail.value;
				this.uid_msg = '';
				this.code_msg = '';
				window.clearInterval(this.timeout);
				this.disabled = false;
				this.ss = 60;
			},
			getInputPwd(e){
				this.password = e.detail.value;
			},
			getInputCodeMsg(e){
				this.code_msg = e.detail.value;
			},
			getInputCodeImg(e){
				this.code_img = e.detail.value;
			},
			validateForm(){
				if(!this.phone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!reg_phone.test(this.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(!this.password){
					uni.showToast({
						title: '请输入登录密码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				let reg_pwd = /^[a-zA-Z0-9]{8,16}$/;
				if(!reg_pwd.test(this.password)){
					uni.showToast({
						title: '密码格式错误，正确格式包含数字和大小写字母，长度为8-16位',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(!this.code_msg){
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(this.code_msg.length!=6){
					uni.showToast({
						title: '您输入的短信验证码错误',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(!this.code_img){
					uni.showToast({
						title: '请输入图片验证码',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				if(this.code_img.length!=4){
					uni.showToast({
						title: '您输入的图片验证码错误',
						icon: 'none',
						duration: 3000,
					})
					return false;
				}
				return true;
			},
			async onSubmit() {
				let flag = this.validateForm();
				if(flag){
					try{
						let res = await this.$req.userData('customer/updateLoginName/imgcheck',{
							loginName: this.phone,
							password: this.password,
							messageUid: this.uid_msg,
							msgCode: this.code_msg,
							uid: this.encryptedString,
							imgCode: this.code_img,
						})
						if(res.code==10000){
							uni.showToast({
								title: '绑定成功！',
								icon: 'success',
								duration: 3000
							})
							//注册成功后直接进入卡列表
							uni.switchTab({
								url: '/pages/tabbar/personal/center'
							})
						}
					}
					catch(e){
						this.encryptedString = '';
						this.uid_msg = '';
						this.code_msg = '';
						this.code_img = '';
						this.disabled = false;
						this.ss = 60;
						window.clearInterval(this.timeout)
						this.getCode();
					}
				}
			},
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		padding: absolute;
		top: 0;
		left: 0;
		padding: 0;
		margin: 0;
	}
	.top{
		width: 100%;
		height: 25%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #a1c4fd;
		
	}
	.top-img{
		width: 100%;
		height: auto;
		position: absolute;
		bottom: -10px;
		left: 0;
	}
	.top-ava{
		width: 100%;
		height: 60%;
		position: absolute;
		top: 20%;
		left: 0;
		text-align: center;
	}
	.mid{
		width: 100%;
		height: auto;
		position: absolute;
		top: 25%;
		margin: 20px 0;
	}
	.mid-label{
		width: 80%;
		height: 40px;
		position: relative;
		top: 0;
		border-bottom: 1px solid #e6e6e6;
		margin: 10px 10%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.mid-label-icon{
		width: 30%;
		height: 100%;
		position: relative;
		display: inline-flex;
		justify-content: start;
		align-items: center;
		font-size: 12px;
		color: #333333;
	}
	.mid-label-icon-eye{
		width: 10%;
		height: 100%;
		position: relative;
		display: inline-flex;
		justify-content: end;
		align-items: center;
		font-size: 12px;
		color: #999;
	}
	.mid-label-split{
		width: 1px;
		height: 60%;
		display: inline-flex;
		background-color: #e6e6e6;
	}
	.mid-label-img{
		width: 70px;
		height: 40px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.mid-input{
		margin: 0 0 0 5px;
		padding: 0 5px;
	}
	.mid-label-btn{
		width: auto;
		height: 24px;
		font-size: 10px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background-color: #a1c4fd;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		color: #fff;
		padding: 0 15px;
	}
	.mid-label-btn-disabled{
		width: auto;
		height: 24px;
		font-size: 10px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(161, 196, 253,0.5);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		color: #999;
		padding: 0 15px;
	}
	.mid-btn{
		width: 80%;
		height: 40px;
		background-color: #a1c4fd;
		color: #FFF;
		font-size: 14px;
		text-align: center;
		line-height: 40px;
		margin: 10%;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
</style>
